<template>
    <view class="main">
        <view class="list">
            <view class="list-item" v-for="(item) in dataList" :key="item.id" @click="goToFeedbackDetail(item.id)">
                <view class="top">
                    <view class="top-left ellipsis">{{ item.feedbackNotes }}</view>
                    <view class="top-right">{{ item.feedbackTime }}</view>
                </view>
                <view class="bottom">
                    <view class="bottom-left ellipsis">{{ item.reply }}</view>
                    <view class="status">{{ item.state == 0 ? '待回复' : '已回复' }}</view>
                </view>
            </view>
            <LoadMore :state="state" />
        </view>
    </view>
</template>

<script setup>
import { feedbackHistory } from '@/api/apiList'
import { ref } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import LoadMore from '@/components/loadMore/LoadMore.vue'

let state = ref('finished')
const queryParams = ref({
    pageNum: 1,
    pageSize: 10
})
const dataList = ref([])
const getList = async () => {
    state.value = 'loading' // finished error
    const { code, msg, rows, total } = await feedbackHistory(queryParams.value)
    if (code == 200) {
        if (total == 0) {
            state.value = 'finished'
        } else {
            if (rows.length == 0) {
                state.value = 'finished'
            } else {
                state.value = 'finished'
                dataList.value = [...dataList.value, ...rows]
            }
        }
    } else {
        state.value = 'error'
    }
}

onLoad(() => {
    getList()
})

onReachBottom(() => {
    queryParams.value.pageNum++
    getList()
})

onPullDownRefresh(() => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    queryParams.value.pageNum = 1
    dataList.value = []
    getList().finally(() => {
        uni.hideLoading()
        uni.stopPullDownRefresh()
    })
})

const goToFeedbackDetail = (id) => {
    uni.navigateTo({
        url: '/pages/mine/feedbackDetail?id=' + id
    })
}
</script>

<style lang="scss" scoped>
.ellipsis {
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    width: 80%;
    /* 必须设置宽度 */
}

.main {
    padding: 20rpx 0;

    .list-item:last-child {
        border-bottom: 1rpx solid #eee;
    }

    .list-item {
        border: 1rpx solid #eee;
        padding: 20rpx;
        border-bottom: none;
        border-radius: 15rpx;

        .top,
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top {
            margin-bottom: 40rpx;

            .top-left {
                font-weight: 900;
                font-size: 30rpx;
            }

            .top-right {
                font-size: 25rpx;
            }
        }

        .bottom {
            .bottom-left {
                font-size: 28rpx;
            }

            .status {
                font-size: 28rpx;
                font-weight: 700;
            }
        }
    }
}
</style>